<template>
    <div class="container" ref="infoLayoutRef">
        <top-box isDefault="true"></top-box>
        <div class="layout">
            <div class="leftBox">
                <video-info-box :data="list.videoInfo?.View" :Tags="list.videoInfo?.Tags" ref="infoBoxRef"></video-info-box>
                <div  class="commentBox">
                    <span class="comTitle">
                        <p>
                            <span>评论</span>
                            <span>{{allCommNum?.all_count }}</span>
                        </p>
                        <p>
                            <span :style="mode === 3?'color:#18191C':'color:'" @click="mode = 3">最热</span>
                            <span>|</span>
                            <span :style="mode === 2?'color:#18191C':'color:'" @click="mode = 2">最新</span>
                        </p>
                    </span>
                    <span>
                        <my-comment></my-comment>
                    </span>
                    <span v-for="item in commentList" :key="item.rpid">
                        <comment-box
                            :card_label="item.card_label"
                            :content="item.content"
                            :member="item.member"
                            :like="item.like"
                            :mid="item.mid"
                            :ctime="item.ctime"
                            :replies="item.replies"
                            :oid="item.oid"
                            :rpid="item.rpid"
                            :reply_control="item.reply_control"
                        >
                        </comment-box>
                    </span>
                    <div class="loading" v-loadata>
                        <span v-loading="isLoading" element-loading-text="Loading..."></span>
                    </div>
                </div>
                <div  class="myComment" v-show="isShowMyComment">
                    <span></span>
                    <my-comment ></my-comment>
                </div>
            </div>
            <template v-if="list.videoInfo">
                <div class="rightBox">
                    <video-up-info-box
                        :card="list.videoInfo.Card.card"
                        :like_num="list.videoInfo.Card.like_num"
                        :following="list.videoInfo.Card.following"
                    >
                    </video-up-info-box>

                    <template v-if="list.rightAd[4330] && list.rightAd[4330][0].ad_desc">
                        <ad-video-item
                            :pic="list.rightAd[4330][0].pic"
                            :desc="list.rightAd[4330][0].ad_desc"
                            :title="list.rightAd[4330][0].title"
                            :isAd="true"
                        ></ad-video-item>
                    </template>

                    <next-play-box
                        :list="list.videoInfo.Related"
                        :adGame="list.videoInfo.Spec?.game"
                        :adType="list.videoInfo.Spec?.type"
                        :adVideo="list.videoInfo.Spec?.archive"
                        :adCard="list.videoInfo.Spec?.card"
                    ></next-play-box>
                </div>
            </template>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { topBox,videoInfoBox,videoUpInfoBox,nextPlayBox,commentBox } from './index'
import { adVideoItem,myComment } from '../components'
import { get } from '@/http/axios'
import { interList,Comment } from '../typeInterface'
import { getWbiKeys,encWbi } from '@/api/getVideo'
import { ref,onBeforeMount, reactive,Ref } from 'vue'
import { getCookies } from '@/utils/cookies'

interface Props{
    avid:String,
    bvid:String,
    cid:String
}
interface Data{
    videoInfo:interList | null
    rightAd:Array<any>
}
const props = defineProps<Props>()
const list = reactive<Data>({
    videoInfo:null,
    rightAd:[]
})
const infoLayoutRef = ref()
const infoBoxRef = ref()
const commentList: Ref<Array<Comment> | null> = ref([])
let isShowMyComment = ref<boolean>(false)
const allCommNum = ref()
let isLoading = ref<boolean>(true)
let mode = ref<number>(3)

onBeforeMount(() => {
    initInfo()
    getRightAd()
    getComment()
})
//当加载组件出现时 添加数据
const vLoadata = {
    mounted: (el:HTMLElement) => {    
        const observer = new IntersectionObserver((enr)=>{
            if (enr[0].intersectionRatio > 0){
                let timer = setTimeout(() => {
                    clearTimeout(timer)
                    let params = allCommNum.value.pagination_reply.next_offset
                    if (params != undefined && isLoading) {
                        getComment(mode.value,params)
                    } else {
                        isLoading.value = false
                        alert('已经没有了噢')
                    }
                },500)

            }
        })
        observer.observe(el);
    }
}
function getRightAd(){
    get('/x/web-show/res/locs?pf=0&ids=2624,2625,3038,4330&bvid='+ props.bvid +'&aid='+ props.avid +'&from_spm_id=333.788.recommend_more_video.0','','/bili')
    .then(res => {
        console.log('这里是广告',res);
        list.rightAd = res.data
    }).catch(res => {
        console.log('右侧广告加载失败');
        
    })
}
//评论
function getComment(mode = 3 as number,data?:object){
    let csrf = getCookies('bili_jct')
    let params = {
        offset:data?data:"",
    }
    get('/x/v2/reply/main?csrf='+csrf+'&mode='+ mode +'&oid='+props.avid+'&pagination_str='+JSON.stringify(params)+'&plat=1&seek_rpid=&type=1','','/bili')
    .then(res => {
        console.log('评论信息',res.data)
        if (!data) {        //为什么放在这里写？因为放在监听的话它会先清空数组 造成盒子为空 有一个压缩高度的过程 视觉效果不好
            commentList.value = []
        }
        commentList.value = [...commentList.value,...res.data.replies]
        allCommNum.value = res.data.cursor
    }).catch(res => {
        alert('评论信息加载失败')
    })
}
function initInfo(){
    const wbi_keys = getWbiKeys()
    const query = encWbi(
        {
            platfrom:'web',
            avid:props.avid,
            bvid:props.bvid,
            need_operation_card:'1',
            web_rm_repeat:'1',
            need_elec:'1',
            out_referer:'https://www.bilibili.com/',
            page_no:'1',
            p:'1',
            web_location:'1446382'
        },
        wbi_keys.img_key, 
        wbi_keys.sub_key
    )
    get('/x/web-interface/wbi/view/detail?'+query,'','/bili')
    .then(res => {
        console.log('视频信息',res);
        list.videoInfo = res.data
    }).catch(res => {
        alert('视频信息出错啦')
    })
}

</script>

<style lang="scss" scoped>
.container{
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.layout{
    display: flex;
    margin-top: 85px;
    width: 90%;
    gap: 40px;
    justify-content: start;
}
.leftBox{
    width: 70%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.rightBox{
    display: flex;
    flex-direction: column;
    width: 25%;
}
.commentBox{
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.comTitle{
    display: flex;
    width: 100%;
    & p:nth-child(1){
        @include flexRowCenter;
        font-size: 25px;
        color: #18191C;
    }
    & p:nth-child(1) span:nth-child(2){
        margin-left: 10px;
        font-size: 13px;
        color: #9499A0;
    }
    & p:nth-child(2){
        margin-left: 20px;
        @include flexRowCenter;
        font-size: 14px;
        gap: 10px;
        color: #9499A0;
    }
    & p:nth-child(2) span:nth-child(1),span:nth-child(3){
        cursor: pointer;
    }
}
.myComment{
    position: fixed;
    bottom: 0;
    left:5%;
    width: 60%;
    height: 70px;
    padding: 0 10px 0 0;
    @include flexRowCenter;
    background: white;
    & span:nth-child(1){
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: -40px 0 0 rgb(255, 255, 255),
                    40px 0 0 rgb(255, 255, 255),
                    0 -5px 10px rgb(0, 0, 0,0.1);
        left: 0;
        top: 0;
        z-index: -1;
    }
    
}
.loading{
    margin-top: 30px;
    width: 100%;
    height: 80px;
    @include flexRowCenter;
}
</style>